<template>
  <div id="bind">
    <h1>学生信息绑定</h1>
    <form :model="questionForm">
      <div class="b">
        <select class="a2" v-model="questionForm.studentGrade" >
          <option  value="">--选择年级--</option>
          <option v-for="item in gradeList" :value="item" >{{item}}</option>
        </select>
      </div>
      <div class="b">
        <select class="a2" v-model="questionForm.studentClass"  >
          <option  value="">--选择班级--</option>
          <option v-for="item in classList"  :value="item">{{item}}</option>
        </select>
      </div>
      <div class="b">
        <input class="a3" type="text" v-model="questionForm.studentName"  placeholder="姓名"><br>
        <input class="a3" type="text" v-model="questionForm.studentNo"  placeholder="学号">
      </div>
      <button id="but" @click="bind">绑定</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios'
export default {
   name: "BindStudent",
   data() {
     return {
       // studentGrade:'',
       // studentClass:'',
       // studentName:'',
       // studentNo:'',
       gradeList: ["1", "2", "3"],
       classList: ["1", "2", "3"],

       questionForm:{
         studentGrade:"",
         studentClass:"",
         studentName:"",
         studentNo:"",
       },
     };
   },

   methods:{
     bind(){
       this.$router.replace({
         name:"BindContinue",
         params:{
           studentGrade:this.questionForm.studentGrade,
           studentClass:this.questionForm.studentClass,
           studentName:this.questionForm.studentName,
           studentNo:this.questionForm.studentNo,
         }
       });
       // var url = "http://192.168.17.74:8888/student/addAudit"
       // let form = null;
       // form = this.questionForm;
       // axios.post(
       //   url,
       //   {
       //     studentAudit:form,
       //   }, {
       //     emulateJSON:false}
       // ).then((data)=>{
       //   console.log(data.data)
       //   console.log(data.code)
       //   if (data.data.code==200){
       //     this.$router.replace("/BindContinue");
       //   }
       //   if (data.code==201){
       //     alert("年级错误");
       //   }
       //   if (data.code==202){
       //     alert("班级错误");
       //   }
       //   if (data.code==203){
       //     alert("姓名错误");
       //   }
       //   if (data.code==204){
       //     alert("学号错误");
       //   }
       // }).catch((error)=>{
       //   console.log(error)
       // })

     }
   }

    }
</script>

<style scoped>
  html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-style: sans-serif;
  }

  body {
    width: 100%;
    height: 100%;
    font-family: 'Open Sans', sans-serif;
    margin: 0;

  }

  #bind{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 500px;
    /* border: 1pt seagreen solid; */
    text-align: center;
    margin: -150px 0 0 -150px;
    background-color: lightblue;

  }

  .b {
    margin-top: 25px;
  }

  #but {
    width: 100px;
    height: 32px;
    text-align: center;
    /* display: block; */
    background-color: #4a77d4;
    border: 1px solid #3762bc;
    color: #fff;
    /* padding: 9px 14px; */
    font-size: 15px;
    line-height: 32px;
    border-radius: 5px;
    margin-top: 10px;
  }
  .a2 {
    width: 210px;
    height: 30px;

  }
  .a3 {
    width: 200px;
    height: 25px;
    margin-bottom: 18px;
  }

</style>
